<template>
  <div class="task-main" v-title data-title="我的任务">
    <home-nav :userData="userinfo"></home-nav>
    <div class="banner"></div>
    <div
      class="container"
      v-infinite-scroll="handleInfiniteOnLoad"
      :infinite-scroll-disabled="busy"
      :infinite-scroll-distance="20"
    >
      <div class="header">
        <a-row type="flex" justify="space-between" align="middle">
          <a-col :span="14">
            <div class="tab-span">
              <span
                v-for="(item, index) of activeTabList"
                :key="index"
                :class="[{ active: activeTab === index }]"
                @click="changeTab(index)"
                >{{ item.name }}</span
              >
            </div>
          </a-col>
          <a-col :span="10">
            <a-button type="primary" class="task-add-btn" :loading="addTaskLoading" @click="addTask">
              <span class="iconfont icon-plus"></span>新建任务</a-button
            >
            <a-input-search :title="serPlaceholder" :placeholder="serPlaceholder" v-model="valueSearch" :allowClear="true" @search="handleSearch" />
            <a-button style="margin-left:5px;" @click="openSearchForm" v-if="activeTab == 0">高级搜索</a-button>
          </a-col>
        </a-row>
      </div>
      <!-- 我的 -->
      <template v-if="activeTab == 0">
        <div class="cascade">
          <HadayFoldFiltrate :data="foldData" :props="props" styleType="autoWidth" @item-change="itemChange">     
            <template #labelPanel="slotProps">
              {{ slotProps.child[props.label] }}
              <span style="color:red;" v-show="slotProps.item.model==='projectSubStatus'&&slotProps.child.code == 4 && delayTotal">({{delayTotal}})</span>
            </template>
            <template #lineMorePanel>
              更多<i class="el-icon-arrow-down"></i>
            </template>
          </HadayFoldFiltrate>
        </div>
        <div class="project-info">
          <div>
            <span>排序：</span>
            <ul class="left-side">
              <li v-for="(item,index) of sortList" :key="item.id">              
                <span :class="[{'fontred': projectColumn ===item.id && projectOrder=== 'asc', 'fontgreen': projectColumn ===item.id && projectOrder=== 'desc'}]" @click="handleSort(item,index)"
                  >{{item.name}}<i class="iconfont icon-sort_icon"></i>
                </span>
              </li>
            </ul>
          </div>
          <div>
            <!-- <a-button v-if="dataPermissionFlag" type="primary" @click="searchClick" style="margin-right:5px;"><a-icon type="search" />{{searchText}}</a-button> -->
            <a-button-group v-if="dataPermissionFlag">
                <a-button :type="deptOrAllFlag ? 'primary' : ''" @click="searchClick(true)"
                  >部门</a-button
                >
                <a-button :type="!deptOrAllFlag ? 'primary' : ''" @click="searchClick(false)"
                  >全部</a-button
                >
              </a-button-group>
            <!-- <a-button v-if="dataPermissionFlag" @click="exportWebXls" :loading="excelLoading" style="margin-left:5px;">导出列表</a-button> -->
            <a-button  @click="exportWebXls" :loading="excelLoading" style="margin-left:5px;">导出列表</a-button>
            <a-button v-if="userinfo.info.deptnameall && userinfo.info.deptnameall.indexOf('数信委员会')> 0" @click="exportHeadWebXls" style="margin-left:5px;">导出迭代</a-button>
          </div>
        </div>
        <div class="tree-main" :class="{'shrinkage': shrinkageFlag}" >
          <div class="box-left ant-table-scroll" v-show="itShowTreeMenuFlag">           
            <div class="tree">
              <haday-organization-tree
                v-if="treeData.length"
                :props="{ children: 'children', label: 'title'}"
                :loading="treeLoading"
                :data="treeData" 
                treeTitle="目录"                
                node-key="key" 
                :currentNodeKey="treeSelectedKeys"
                @node-click="onSelectClass">
              </haday-organization-tree>
            </div>
          </div>
          <div :class="{'content-list':itShowTreeMenuFlag,'content-list-no-menu':!itShowTreeMenuFlag}">
          <div v-show="emptyFlag" >
            <a-empty v-show="emptyFlag" />
            <div style="text-align: center;font-weight: bold;">可通过改变上面的导航栏，目录树或搜索栏进行查询</div>
          </div>
          <div v-show="skeletonFlag">
            <a-skeleton active />
            <a-skeleton active />
          </div>
          <h3 v-show="taskList && taskList.length > 0"></h3>
          <div v-for="(item, index) of taskList" :key="item.id" class="box-list" v-show="drShowFunc(item)">
            <a-tooltip>
                  <template slot="title">
                    <span v-if="item.taskType =='30' && item.status == 2 && item.hasSendNotice == '1'">
                      检查子任务完成情况和缺陷完成情况（如有），如果两者都已完成，请点击【是否已上线】来确认任务单的完成情况。
                    </span>
                  </template>
            <div class="box-list-head">              
              <div class="box-flex mb13">
                <span><span class="hte-text-downline" @click="handleChildGoTo('headDetail', item)">
                  <span class="box-version" v-if="getVersion(item.versionNo,item.taskBugLevel).name" :class="getVersion(item.versionNo,item.taskBugLevel).color">{{getVersion(item.versionNo,item.taskBugLevel).name}}</span>
                  {{item.taskNo ? item.taskNo : ''}} {{ item.taskName }}{{item.versionNo ? '('+item.versionNo+')' : ''}}  <span v-if="item.delayFlag" style="color:red;font-weight: bold;font-size: 16px;">[延误]</span>
                  </span></span>
                <span>开始时间：{{ item.startDate }}</span>
                <span>结束时间：{{ item.endDate }}</span>
              </div>
              <div class="box-flex">
                <div class="flex-child-fir">
                  <span>主导团队：{{ item.mainDeptName }}</span>
                  <span>跟进人：{{ item.createUserName }}</span>
                  <span v-if="item.handlerName">迭代负责人：{{ item.handlerName }}</span>
                  <span>任务总数：{{ item.taskTotal }}</span>
                  <span>已完成任务：{{ item.completedTotal }}</span>
                  <div class="box-pro">
                    已完成<span>{{ item.completion }}%</span>
                    <div><a-progress :percent="item.completion" :show-info="false" /></div>
                  </div>
                </div>
                <div class="flex-child-sed">
                  <span @click="toggleContent(index)" v-if="item.detailCopy.length">
                    <i class="iconfont icon-zijiedian"></i>子任务
                    <a-icon
                      class="icon-child-down"
                      :class="[{ 'icon-child-up': item.showFlag }]"
                      slot="suffixIcon"
                      type="caret-down"
                    />
                  </span>
                  <span v-if="item.permissionFlag || item.teamPermissionFlag || item.handlerId===currentUserId || (item.openRange && item.openRange.indexOf(currentUserId) >= 0)" @click="handleChildGoTo('addChild', item)"
                    ><i class="iconfont icon-xinzeng"></i>新建子任务</span
                  >
                  <span v-if="item.permissionFlag || item.teamPermissionFlag " @click="handleChildGoTo('editChild', item)"><i class="iconfont icon-xuqiu"></i>修改</span>
                  <span v-if="item.createUserId === currentUserId " @click="handleChildGoTo('deleteHead', item)"><a-icon type="delete" />删除</span>
                  <span v-if="item.taskType =='30'" @click="handleChildGoTo('bugList', item)"><i class="iconfont icon-lishi"></i>缺陷列表</span>
                  <span v-if="item.permissionFlag || item.teamPermissionFlag || item.dataPermissionFlag " @click="handleChildGoTo('history', item)"><i class="iconfont icon-lishi"></i>操作日志</span>
                  <span v-if="item.status == 3" @click="handleChildGoTo('remind', item)" title="点击可发送消息提醒未完成的责任人"><i class="iconfont icon-lishi"></i>提醒</span>
                  <span v-if="(item.createUserId === currentUserId || item.handlerId===currentUserId) && item.taskType == '30' && item.status == 2 && item.hasSendNotice == '1'" @click="handleChildGoTo('sendNotice', item)"><i class="iconfont-s icon-tasktop"></i>是否已上线</span>
                </div> 
              </div>
                  <!-- item.status -->
                <div :class="['status-box',`projectStatusColor${item.status == 1 ? 1: (item.taskType =='30' ? (item.status == 2 && item.hasSendNotice && item.hasSendNotice != '1' ? 2 : 3) : (item.status == 2 ? 2 : 3))}`]">
                  {{item.status == 1 ? '创建中': (item.taskType =='30' ? (item.status == 2 && item.hasSendNotice && item.hasSendNotice != '1' ? '已完成' : '未完成') : (item.status == 2 ? '已完成' : '未完成'))}}
                </div>
            </div>
            </a-tooltip>
            <div class="box-list-content" v-show="item.showFlag">
              <div class="nav-bg">
                <span class="flex-half"></span>
                <span style="flex:0.4;minWidth:48px;word-wrap: break-word;">{{item.taskType == '10' ? '编号' : '序号'}}</span>
                <span class="flex2">子任务内容</span>
                <span>责任人</span>
                <span>计划开始时间</span>
                <span>计划结束时间</span>
                <span v-show="item.taskType != '30'">预计结束时间</span>
                <span>实际完成时间</span>
                <span style="maxWidth: 150px">操作</span>
              </div>
              <section>
                <div v-for="(child,index) of item.detailCopy" :key="child.id">
                 <div class="content-bg" >
                  <span class="flex-half">
                    <a-tooltip placement="left" arrow-point-at-center>
                      <template slot="title">
                        <span>{{ child.detailStatus | quyStatus(that) }}</span>
                      </template>
                      <!-- 1创建中、2已完成 3未完成 4延误 5全部 -->
                      <!-- color-suc color-dis color-err dot-->
                      <span
                        :class="[
                          'dot',
                          {
                            'color-suc': 2 == child.detailStatus,
                            'color-err': 4 == child.detailStatus,
                            'color-dis': 3 == child.detailStatus,
                          },
                        ]"
                      ></span>
                    </a-tooltip>
                  </span>
                  <span style="flex:0.4;minWidth:48px;word-wrap: break-word;">{{ item.taskType == '10' ?  (item.projectBuildId ? child.id + 'p' : child.id+'') : index +1 }}</span>
                  <span class="flex2" v-if="item.taskType =='61' && !!child.linkId">
                    <a-button type="link"  @click="goPolicyLink(child.linkId)">{{child.taskContent}}</a-button></span>
                  <span class="flex2" v-else>{{ child.taskContent }}</span>
                  <span>{{ child.handleUserName }}</span>
                  <span>{{ child.startDate }}</span>
                  <span>{{ child.endDate }}</span>
                  <span v-show="item.taskType != '30'">{{ child.planCompletionDate }}</span>
                  <span>{{ child.realCompletionDate }}</span>
                  <span style="maxWidth: 150px; display: flex;flex-wrap: wrap;position: relative;overflow: hidden;">
                    <a @click="handleChildGoTo('detChild', child, item)" v-if=" item.permissionFlag ||  item.teamPermissionFlag || item.dataPermissionFlag">{{child.detailStatus == 2 ? '详情' :  (child.handleUserId === currentUserId) ? '报工' : '详情'}}</a>                    
                    <a @click="handleChildGoTo('delChild', child, item)" v-if="child.detailStatus != 2 && child.handleUserId === currentUserId">删除</a>
                    <a @click="handleChildGoTo('tranDo', child, item)" v-if="child.detailStatus != 2 && child.handleUserId === currentUserId">转办</a>
                    <!-- <a @click="handleChildGoTo('applyData', child, item)" v-if="item.taskType == '10'">发起数据申请</a>
                    <a @click="handleChildGoTo('openProcessDetail', child, item)" v-if="item.taskType == '10'">数据流程</a> -->
                    <div v-if="child.tranDoStatus" :class="['status-box-trando',`projectStatusColor5`]">
	                    已转办
	                  </div>
                  </span>                  
                </div>
                </div>
                
              </section>
              <!-- <template v-if="item.detail.length > 10"> -->
              <template>
                <a-pagination
                  :pageSize="childPageSize"
                  :hideOnSinglePage="true"
                  show-less-items
                  :total="item.detail.length"
                  @change="(value) => onChangepage(value, index)"
                />
              </template>
            </div>
          </div>
          <div class="loaddingbox" v-show="loaddingFlag">
            <a-spin spinning :delay="10" tip="加载中" />
          </div>
          <div class="tips-box" v-show="!loaddingFlag && !emptyFlag">暂无更多数据</div>
        </div>
        </div>
        
      </template>
      <!-- 个人 -->
      <template v-else-if="activeTab == 1">
        <task-personal
          ref="personalRef"
          :searchVal="valueSearch"
          key="personal"
          taskFlag="personal"
          @backDetHome="changeTab"
        ></task-personal>
      </template>
      <!-- 团队 -->
      <template v-else>
        <task-personal
          ref="teamRef"
          :searchVal="valueSearch"
          key="team"
          taskFlag="team"
          @backDetHome="changeTab"
        ></task-personal>
      </template>
    </div>
    <a-back-top class="backtodom" />
    <!-- 弹框模板 -->
    <a-modal v-model="visibleModel" title="新增之前请先选择任务单类型" @ok="handleClassOk" :width="'600px'">
      <span style="color:red;">温馨提示：</span>
      <div style="font-weight:bold;margin-bottom:10px;">1、项目类任务单：是自动与海芯项目的时间节点表拉通，属于项目的细化管理工具。<br>
2、非项目类型：是无建立海芯项目的任务单，无拉通，用于日常工作任务的管理工具。<br>
3、经营类任务单：拉通海泽白皮书、组织绩效方案，适用于组织经营工作的细化管理。</div>
      <a-row class="mb13">
        <a-col :span="5">任务单类型:</a-col>
        <a-col :span="15">
          <a-radio-group v-model="selectedStatus">
            <a-radio value="1">
              项目类
            </a-radio>
            <a-radio value="2">
              非项目类
            </a-radio>
            <a-radio value="3">
              经营类
            </a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
      <a-row v-show="selectedStatus === '2'">
        <a-col :span="5" style="margin-top: 6px">项目大类:</a-col>
        <a-col :span="15">
          <a-select
            style="width: 240px"
            v-model="selectedClass"
            @change="handleClassChange"
            placeholder="请选择项目大类"
          >
            <a-select-option
              v-for="(item, index) in projectModelTypes"
              :key="index"
              :value="item.code"
              :label="item.name"
              >{{ item ? item.name : '--' }}</a-select-option
            >
          </a-select>
        </a-col>
      </a-row>
    </a-modal>
    <a-modal
      v-model="visibleModelHistory"
      width="70vw"
      :bodyStyle="{ padding: '10px', backgroundColor: '#f4f5fa' }"
      title="变更历史"
      :footer="null"
      :key="hid"
    >
      <task-change-history :hid="hid"></task-change-history>
    </a-modal>
    <a-modal
      v-model="visibleModelBugList"
      width="70vw"
      :bodyStyle="{ padding: '10px', backgroundColor: '#f4f5fa' }"
      title="缺陷列表"
      :footer="null"
      :key="bugHid"
      
    >
      <task-bug-list :hid="hid" @closeBugModal="closeBugModal"></task-bug-list>
    </a-modal>
    <a-modal
      :visible="showSearchForm"
      width="70vw"
      :bodyStyle="{ padding: '10px' }"
      title="高级查询"
      @ok="handleToSearch"
      @cancel="handleToCancel"
    >
      <a-form-model ref="ruleForm" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="任务单名称">
              <a-input v-model="taskName" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="责任人">
              <a-input v-model="createUserId" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="主导团队">
              <a-input v-model="teamName" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="任务单编号">
              <a-input v-model="taskNo" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="版本号">
              <a-input v-model="versionNo" />
            </a-form-model-item>
          </a-col>
          <a-col :span="8">
            <a-form-model-item label="迭代负责人">
              <a-input v-model="handlerName" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-model-item label="任务单所属项目">
               <a-select
                  show-search
                  :value="selectValue"
                  placeholder="请输入项目名称进行搜索下拉选择"
                  style="width: 100%"
                  :default-active-first-option="false"
                  :show-arrow="false"
                  :filter-option="false"
                  not-found-content="没有查询到该项目"
                  @search="selectHandleSearch"
                  @change="selectHandleChange"
                  allowClear
                  showArrow
                >
                  <a-select-option v-for="d in selectData" :key="d.id">
                    {{ d.name }}
                  </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
     <a-modal
      :visible="showHasSendNotice"
      width="50vw"
      :bodyStyle="{ padding: '10px' }"
      title="是否确认已上线"
      @ok="sendNoticeOk"
      @cancel="sendNoticeCancel"
    >
      <a-form-model :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="是否已上线">
              <a-radio-group v-model="hasSendNotice">
                <a-radio value="1">未完成</a-radio>
                <a-radio value="2">已完成并且已发通知</a-radio>
                <a-radio value="3">已完成但无需发通知</a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>

    <a-modal
      v-model="visibleModelProcess"
      width="70vw"
      :bodyStyle="{ padding: '10px', backgroundColor: '#f4f5fa' }"
      title="流程状态"
      :footer="null"
      :key="'process'+processId"
    >
      <task-tech-process :detailId="processId"></task-tech-process>
    </a-modal>


    <a-modal
      :visible="showTranDo"
      width="50vw"
      :bodyStyle="{ padding: '10px' }"
      title="转办人员"
      @ok="tranDoOk"
      @cancel="tranDoCancel"
    >
      <a-form-model :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="转办人员">
              <a-select
                  show-search
                  :value="tranDo.handleUserName"
                  placeholder="转办人员"
                  style="width: 100%"
                  :filter-option="false"
                  :not-found-content="fetching ? '找不到记录' : '找不到记录'"
                  @search="fetchTestUser"
                  @change="fetchTestChange"
                >
                  <a-spin v-if="fetching" slot="notFoundContent" size="small" />
                  <a-select-option v-for="(d, index) in userTestData" :key="index" :value="d.username">
                    {{ d.realname }}
                  </a-select-option>
                </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { getAction, postAction, downloadFileLink } from '@/api/manage'
import { codeInfoList } from '@/api/codeInfo'
import Vue from 'vue'
import {Checkbox, CheckboxGroup, Tree, Input} from 'element-ui'; 
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Tree);
Vue.use(Input);
import { ACCESS_TOKEN, USER_INFO } from '@/store/mutation-types'
import moment from 'moment'
import { Modal } from 'ant-design-vue'

const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows)
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows)
  },
}
export default {
  name: 'TaskHome',
  components: {
    HomeNav: () => import('@/components/layouts/HomeNav'),
    TaskPersonal: () => import('@views/myTask/TaskPersonal'),
    TaskChangeHistory: () => import('@views/myTask/TaskChangeHistory'),
    TaskBugList: () => import('@views/myTask/TaskBugList'),
    TaskTechProcess: () => import('@views/myTask/TaskTechProcess')
  },
  data() {
    return {
      treeLoading: true,
      userinfo: {
        info: this.$store.getters.userInfo,
        module: 'TaskHome',
      },
      searchText:'查看全部',
      foldData:[],
      props:{
         label: 'name',
         key: 'code',
      },
      deptOrAllFlag: true,
      dataPermissionFlag: false,
      that: this,
      activeTab: 0,
      activeTabList: [{ name: '我的' }, { name: '个人' }, { name: '团队' }],
      taskList: [],
      // 查询
      valueSearch: '',
      serPlaceholder: '可输入任务名称、责任人、主导团队、时间进行搜索',
      skeletonFlag: false, // 骨架
      emptyFlag: false, // 无数据
      loaddingFlag: false, // 加载中
      addTaskLoading: false,
      busy: false,
      total: 0,
      pageNO: 1,
      // model
      visibleModel: false,
      visibleModelHistory: false,
      visibleModelBugList: false,
      projectModelTypes: [],
      selectedStatus: '',
      selectedClass: '',
      selectedClassName: '',
      projectTypes: [
        { name: '全部', code: '3' },
        { name: '项目类', code: '1' },
        { name: '非项目类', code: '2' },
       // { name: '系统缺陷类', code: '4' },
        { name: '经营类', code: '6' },
        { name: '我参加的', code: '5' },
      ],
      projectStatus: '5',
      projectSubType: [
        { name: '全部', code: 5 },
        { name: '创建中', code: 1 },
        { name: '已完成', code: 2 },
        { name: '未完成', code: 3 },
        { name: '延误', code: 4 },
      ],
      projectSubStatus: 3,
      pageSize: 10,
      childPageSize: 10,
      hid: '',
      bugHid: 1,
      currentUserId: '',
      // 排序，优先按完成时间排（早完成的排前面）asc升序红色 desc绿色
      sortList: [  
        {name: '责任人', id: 'create_user_id', order: 'asc'},
        {name: '开始时间', id: 'start_date', order: 'asc'},
        {name: '结束时间', id: 'end_date', order: 'asc'},
      ],
      projectColumn: 'end_date',
      projectOrder: 'asc',
      showSearchForm: false,
      taskNo: '',
      versionNo: '',
      handlerName: '',
      productSystem: '',
      subProductSystem: '', 
      treeDeptId: '', 
      taskName: '',
      createUserId: '',
      teamName: '',
      selectValue: undefined,
      selectData: [],
      realDeptName: '',
      shrinkageFlag:false,
      treeData: [],
      treeSelectedKeys: '',
      rowSelection,
      codeInfoList: '/manage/codeInfo/list',
      itShowTreeMenuFlag: true,
      projectClassType:[],
      projectClassSubStatus:'',
      firstInto:false,
      yearList: [],
      searchYear:'',
      delayTotal:'',
      hasSendNotice:'',
      showHasSendNotice: false,
      selectId:'',
      processId: '',
      visibleModelProcess:false,
      fetching: false,
      userTestData: [],
      url: {
        getUserList: '/lib/hteFileClass/getUserListOnlyUpms',
      },
      tranDo:{
        handleUserId:'',
        handleUserName:undefined,
        id:'',
        taskBuildType:''
      },
      showTranDo: false,
      excelLoading: false
    }
  },
  mounted() {
    if (this.$route.query.projectStatus) {
      this.projectStatus = this.$route.query.projectStatus
    }
    this.initData()
    this.getTaskListData()
    this.checkPermission()
    this.getTreeData()
    this.firstInto = true
  },
  created() {
    this.currentUserId = Vue.ls.get(USER_INFO).username
  },
  methods: {
    initData() {
      let year = parseInt(moment().format('YYYY'))
      //this.searchYear = year
      this.yearList.push({ code: '', name: '全部' })
      for (var i = 0; i < 5; i++) {
        if (year - i < 2021) {
          break; 
        }
        this.yearList.push({ code: year - i + '', name: year - i })
      }
      getAction('/projectWorkTask/querytaskUsedProjectClassList')
        .then((res) => {
          if (res.code == 200 && res.result) {
            this.projectClassType = res.result || []
            this.projectClassType.splice(0, 0, { code: '', name: '全部', type: '我的任务分类', isdel: '0', parentid: '' })
            this.$ls.set('TaskProjectTypes', this.projectClassType)
            this.setFoldDataList('projectStatus', this.projectTypes, '类型：')
            this.setFoldDataList('projectClassSubStatus', this.projectClassType, '项目分类：')
            this.setFoldDataList('projectSubStatus', this.projectSubType, '状态：')
            this.setFoldDataList('searchYear', this.yearList, '年份：')
          } else {
            this.$message.warning('我的任务分类加载失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('我的任务分类加载失败:' + res.message)
        })
    },
    getTreeData(){
      var vm = this
      getAction('/projectWorkTask/getTreeList')
        .then((res) => {
          if (res.code == 200) {
            vm.treeData = res.result || []

            let allTree = {children:null,label:'全部',title:'全部',key:'',value:''}
            vm.treeData.unshift(allTree)            
            vm.treeSelectedKeys = ''
            this.treeLoading = false
          } else {
            this.$message.warning('查询产品系统失败:' + res.message)
          }
        })
        .catch((res) => {
          this.$message.warning('查询产品系统失败:' + res.message)
        })
    },
     /**
     * 选择树节点，切换列表数据
     */
    onSelectClass(selectedKeys,e,event) {       
      if(selectedKeys.key == this.treeSelectedKeys){
        return
      } else {
        let itemArr = e.data.children || [];
        let result = []
        if (itemArr) {
          itemArr.forEach(item => {
            result.push(item.key)
          })
        }

        const isHeadAndNoSon = e.data.slotTitle || ''

        if (isHeadAndNoSon == 'child') {
          this.treeDeptId = ''
          this.productSystem = selectedKeys.key
          // this.subProductSystem = result.join(',')
          // if (this.subProductSystem) {
          //   this.productSystem = ''
          // }
        } else {
          this.treeDeptId = selectedKeys.key
          this.productSystem = ''
          this.subProductSystem = ''
        }
        this.treeSelectedKeys = selectedKeys.key
      }
      this.getTaskListData()
    },
    exportWebXls:function(){
      this.excelLoading = true
      let that = this;

      let queryParam = {}
      queryParam.pageNo = 1;
      queryParam.pageSize = -1;
      queryParam.taskBuildType = 3;
      queryParam.keyword = this.valueSearch;
      queryParam.isProject = this.projectStatus;
      queryParam.status = this.projectSubStatus;
      queryParam.projectClassSubStatus = this.projectClassSubStatus;
      queryParam.deptOrAllFlag = this.deptOrAllFlag;
      queryParam.column = this.projectColumn;
      queryParam.order = this.projectOrder;
      queryParam.taskNo = this.taskNo;
      queryParam.versionNo = this.versionNo,
      queryParam.handlerName = this.handlerName,
      queryParam.taskName = this.taskName,
      queryParam.createUserId = this.createUserId,
      queryParam.teamName = this.teamName,
      queryParam.projectBuildId = this.selectValue
      queryParam.realDeptName = this.realDeptName
      queryParam.productSystem = this.productSystem
      queryParam.subProductSystem = this.subProductSystem
      queryParam.treeDeptId = this.treeDeptId
      queryParam.searchYear = this.searchYear

      downloadFileLink('/projectWorkTask/exportWebXls','任务单导出',queryParam,{type: 'application/vnd.ms-excel'});
      this.excelLoading = false
    },
    exportHeadWebXls:function(){
      let that = this;

      let queryParam = {}
      queryParam.pageNo = 1;
      queryParam.pageSize = -1;
      queryParam.taskBuildType = 3;
      queryParam.keyword = this.valueSearch;
      queryParam.isProject = this.projectStatus;
      queryParam.status = this.projectSubStatus;
      queryParam.projectClassSubStatus = this.projectClassSubStatus;
      queryParam.deptOrAllFlag = this.deptOrAllFlag;
      queryParam.column = this.projectColumn;
      queryParam.order = this.projectOrder;
      queryParam.taskNo = this.taskNo;
      queryParam.versionNo = this.versionNo,
      queryParam.handlerName = this.handlerName,
      queryParam.taskName = this.taskName,
      queryParam.createUserId = this.createUserId,
      queryParam.teamName = this.teamName,
      queryParam.projectBuildId = this.selectValue
      queryParam.realDeptName = this.realDeptName
      queryParam.productSystem = this.productSystem
      queryParam.subProductSystem = this.subProductSystem
      queryParam.treeDeptId = this.treeDeptId
      queryParam.searchYear = this.searchYear

      downloadFileLink('/projectWorkTask/exportWebHeadXls','任务单头导出',queryParam,{type: 'application/vnd.ms-excel'});
     
    },
    checkPermission() {
       getAction('/projectWorkTask/checkPermission', {}).then((res) => {
        if (res.code == 200) {
          if(res.result){
            this.dataPermissionFlag = true
          }else{
             this.dataPermissionFlag = false
          }        
        } else {
          this.$message.warning('查询权限失败:' + res.message)
        }
      }) 
    },
    handleToCancel() {
      this.showSearchForm = false
      this.taskNo = ''
      this.versionNo = ''
      this.handlerName = ''
      this.taskName = ''
      this.createUserId = ''
      this.teamName = ''
      this.selectValue = undefined
      this.selectData =  []
    },
    openSearchForm() {
      this.showSearchForm = true
    },
    handleToSearch() {
      this.getTaskListData()
    },
    sendNoticeOk() {
      this.confirmSendNotice()
      this.sendNoticeCancel()
    },
    sendNoticeCancel() {
      this.showHasSendNotice = false
      this.selectId = ''
    },
    selectHandleSearch(value) {
      this.getProjectInTask(value)
    },
    selectHandleChange(value) {
      this.selectValue = value;
    },
    getProjectInTask(value) {
      if (!value) {
        return
      }
      getAction('/projectWorkTask/getProjectlistInTask', {
        keyword: value
      }).then((res) => {
        if (res.code == 200) {
          this.selectData = res.result
        } else {
          this.$message.warning('数据加载失败:' + res.message)
        }
      })
    },
    searchClick(flag) {
      // 查看全部 deptOrAllFlag = false
      // 查看部门 deptOrAllFlag = true
      // this.searchText = this.searchText === '查看全部' ? '查看部门' : '查看全部'
      this.searchText = this.deptOrAllFlag ? '查看部门' : '查看全部'
      this.deptOrAllFlag = flag
      this.getTaskListData()
    },
    handleSearch() {
      switch (this.activeTab) {
        case 0:
          if (this.realDeptName != this.valueSearch) {
            this.realDeptName = ''
          }
          this.getTaskListData()
          break
        case 1:
          this.$refs.personalRef.handleSearch()
          break
        default:
          this.$refs.teamRef.handleSearch()
          break
      }
    },
    getTabStatusNumber() {
       getAction('/projectWorkTask/getTabStatusNumber', {
        keyword: this.valueSearch,
        isProject: this.projectStatus,
        status: 4,
        projectClassSubStatus: this.projectClassSubStatus,
        taskNo: this.taskNo,
        versionNo: this.versionNo,
        handlerName: this.handlerName,
        taskName: this.taskName,
        createUserId: this.createUserId,
        teamName: this.teamName,
        projectBuildId: this.selectValue,
        productSystem: this.productSystem,
        subProductSystem: this.subProductSystem,
        treeDeptId: this.treeDeptId,
        searchYear: this.searchYear,
      }).then((res) => {
        if (res.code == 200 && res.result) {
          this.delayTotal = res.result.delayTotal
        }
      })
    },
    getTaskListData(type) {
      if (type !== 'scroll') {
        this.skeletonFlag = true
        this.emptyFlag = false
        this.pageNO = 1
        this.taskList = []
      }

      this.getTabStatusNumber();
      getAction('/projectWorkTask/list', {
        pageSize: this.pageSize,
        pageNo: this.pageNO,
        keyword: this.valueSearch,
        taskBuildType: '3',
        isProject: this.projectStatus,
        status: this.projectSubStatus,
        projectClassSubStatus: this.projectClassSubStatus,
        column: this.projectColumn,
        order: this.projectOrder,
        deptOrAllFlag: this.deptOrAllFlag,
        taskNo: this.taskNo,
        versionNo: this.versionNo,
        handlerName: this.handlerName,
        taskName: this.taskName,
        createUserId: this.createUserId,
        teamName: this.teamName,
        projectBuildId: this.selectValue,
        realDeptName: this.realDeptName,
        productSystem: this.productSystem,
        subProductSystem: this.subProductSystem,
        treeDeptId: this.treeDeptId,
        searchYear: this.searchYear,
      }).then((res) => {
        if (res.code == 200) {
          if (res.result && res.result.records.length > 0) {
            if (type === 'scroll') {
              res.result.records = this.taskList.concat(res.result.records)
              this.loaddingFlag = false // 加载中
            } else {
              this.total = res.result.total
              this.skeletonFlag = false
            }
            // 设置完成率
            // 设置子任务分页
            res.result.records.forEach((item) => {
              item.completion = item.taskTotal === 0 ? 0 : Math.round((item.completedTotal / item.taskTotal) * 10000) / 100 // 完成率（已完成/总任务）
              // 博士后工作站子任务排序
              if (item.taskType == '11' && item.detail.length > 0) {
                item.detail.sort((a,b)=>{
                   return a.startDate.localeCompare(b.startDate)
                })
              }

              item.detailCopy = item.detail.slice(0, this.childPageSize)
            })
            // 排序 
            const that = this;
            res.result.records.sort((a,b)=>{
              let bnum = 0
              let anum = 0
              if (that.getVersion(b.versionNo).name == '大版本') {
                bnum = 3
              }
              if (that.getVersion(b.versionNo).name == '中版本') {
                bnum = 2
              }
              if (that.getVersion(a.versionNo).name == '大版本') {
                anum = 3
              }
              if (that.getVersion(a.versionNo).name == '中版本') {
                anum = 2
              }
              return bnum - anum
            })
            this.taskList = res.result.records
            this.busy = false
          } else {
            if (type === 'scroll') {
              this.loaddingFlag = false // 加载中
            } else {
              this.emptyFlag = true
              this.skeletonFlag = false
            }
            this.busy = true
          }
        } else {
          this.$message.warning('数据加载失败:' + res.message)
        }
        this.handleToCancel();
      })
    },
    handleInfiniteOnLoad() {
      if (this.firstInto) {
        this.firstInto = false
        return
      }
      if (this.activeTab === 0) {
        if (this.loaddingFlag) {
          return
        }
        this.loaddingFlag = true
        if (this.taskList.length >= this.total) {
          this.busy = true
          this.loaddingFlag = false
          return
        }
        this.pageNO += 1
        this.getTaskListData('scroll')
      }
    },
    // 切换大类别
    changeTab(index, keyword,taskFlag,searchYear,permissionFlag) {
      // if (index === this.activeTab) {
      //   return
      // }
      // drcary

      this.activeTab = index
      switch (this.activeTab) {
        case 0:
          this.serPlaceholder = '可输入任务名称、责任人、主导团队、时间进行搜索'
          break
        case 1:
          this.serPlaceholder = '可输入责任人,部门进行搜索'
          break
        default:
          this.serPlaceholder = '可输入团队名进行搜索'
          break
      }
      
      this.valueSearch = keyword || ''
      if (this.activeTab === 0) {  
        // 个人-团队跳转
        if(typeof keyword === 'string'){
          this.projectStatus = '3' // 默认查询全部
          this.projectSubStatus =  5
          this.projectColumn = 'end_date'
          this.projectOrder = 'asc'
          this.searchYear = searchYear
          this.$set(this.foldData[0], 'activedKey', this.projectStatus)
          // this.$set(this.foldData[1], 'activedKey', this.projectClassSubStatus)
          this.$set(this.foldData[2], 'activedKey', this.projectSubStatus)
          this.$set(this.foldData[3], 'activedKey', this.searchYear)

          if (typeof permissionFlag === 'string') {
            this.deptOrAllFlag = false
            this.searchText='查看部门'
          }
        } 
        if (typeof taskFlag === 'string' && taskFlag !='personal') {
          this.realDeptName = keyword
          this.getTaskListData()
        } else {
          this.realDeptName = ''
          this.getTaskListData()
        }       
      }
      window.scrollTo(0,0)
    },
    onChangepage(current, index) {
      const obj = this.taskList[index]
      const start = (current - 1) * this.childPageSize
      const end = current * this.childPageSize
      obj.detailCopy = obj.detail.slice(start, end)
      this.$set(this.taskList, index, obj)
    },
    // 子任务切换显示
    toggleContent(index) {
      const obj = this.taskList[index]
      obj.showFlag = !obj.showFlag
      this.$set(this.taskList, index, obj)
    },
    /**
     * 新建任务
     */
    addTask() {
      this.addTaskLoading = true
      //  if (this.$ls.get('PersonTaskProjectTypes')) {
      //   const list = this.$ls.get('PersonTaskProjectTypes')
      //   if (list.length > 0) {
      //     // const dorctorCode = list.filter(item => {
      //     //   return item.code == '11'
      //     // })
      //     // if (dorctorCode.length === 0) {
      //     //   const obj ={code:'11',name:'博士后工作站'}
      //     //   list.push(obj);
      //     // }
      //     this.projectModelTypes = list
      //     this.selectedStatus = this.projectStatus === '3' ? '1' : this.projectStatus;
      //     this.visibleModel = true
      //     this.addTaskLoading = false
      //     return
      //   }
      // }
      codeInfoList({ column: 'code', order: 'Asc', pageNo: 0, pageSize: -1, isdel: false, type: '我的任务分类' }).then(
        (res) => {
          if (res.code == 200 && res.result && res.result.records) {
            this.projectModelTypes = res.result.records || []
            // const obj ={code:'11',name:'博士后工作站'}
            // this.projectModelTypes.push(obj);
            this.$ls.set('PersonTaskProjectTypes', this.projectModelTypes)
            this.visibleModel = true
            this.selectedStatus = this.projectStatus === '3' ? '1' : this.projectStatus;
            this.addTaskLoading = false
          } else {
            this.$message.warning('字典加载失败:' + res.message)
            this.addTaskLoading = false
          }
        }
      )
    },
    handleClassChange(val, option) {
      this.selectedClassName = option.componentOptions.propsData.label
    },
    handleClassOk() {
      if(this.selectedStatus === '2'){
        if (!this.selectedClass) {
          this.$message.warning('请先选择项目大类')
          return
        }
        let urlJump = this.$router.resolve({ path: `/dailyTaskAdd?projectName=${this.selectedClassName}` + '&projectClass=' + this.selectedClass })
        window.open(urlJump.href, '_blank')
      }else if (this.selectedStatus === '1'){
        let urlJump = this.$router.resolve({ path: `/projectTaskAdd` })
        window.open(urlJump.href, '_blank')
      } else {
        let urlJump = this.$router.resolve({ path: `/dailyTaskAdd?projectName=经营类任务单` + '&projectClass=hrManage' })
        window.open(urlJump.href, '_blank')
      } 
      this.selectedClass = ''
      this.visibleModel = false
    },
    closeBugModal(){
      this.visibleModelBugList = false
    },
    handleChildGoTo(type, item, parentObj) {      
      const _this = this
      const parent = parentObj ? parentObj : item
      // 项目类 taskBuildType ==3    非项目类taskBuildType 1个人、2团队
      // 'project' 项目类、  'daily'非项目类  dailyBug 缺陷类 taskBugType
      // const statusUrl = parent.taskBuildType === '3' ? 'project' : (parent.taskBugType == '1') ? 'dailyBug':'daily'
      const statusUrl = parent.taskBuildType === '3' ? 'project' : 'daily'
      let urlJump;
      switch (type) {
        case 'history':
          this.hid = item.id
          this.visibleModelHistory = true
          break
        case 'bugList':
          this.bugHid += 1
          this.hid = item.id
          this.visibleModelBugList = true
          break
        case 'addChild':
          urlJump = this.$router.resolve({ path: `/${statusUrl}TaskAdd?id=${item.id}` })
          window.open(urlJump.href, '_blank')
          break
        case 'detChild':
          urlJump = this.$router.resolve({ path: `/${statusUrl}TaskDetail?id=${item.parentId}&detailId=${item.id}` })
          window.open(urlJump.href, '_blank')
          break
        case 'editChild':   
          if(item.permissionFlag||item.teamPermissionFlag){
            urlJump = this.$router.resolve({ path: `/${statusUrl}TaskAdd?id=${item.id}` })
            window.open(urlJump.href, '_blank')
          }
          break
        case 'headDetail':
          if(item.permissionFlag||item.teamPermissionFlag) {
            urlJump = this.$router.resolve({ path: `/${statusUrl}TaskAdd?id=${item.id}` })
            window.open(urlJump.href, '_blank')
          } else {
            urlJump = this.$router.resolve({ path: `/${statusUrl}TaskDetail?id=${item.id}` })
            window.open(urlJump.href, '_blank')
          }
          break
        case 'deleteHead':
          Modal.confirm({
            title: '是否确定删除?',
            onOk() {
              _this.confirmHeadDel(item)
            },
          })
          break
        case 'delChild':
          if(parentObj && parentObj.detail && parentObj.detail.length === 1){
            this.$message.warning('该任务单只有一条子任务，不能删除')
            return
          }        
          Modal.confirm({
            title: '是否确定删除?',
            onOk() {
              _this.confirmDel(parentObj,item)
            },
          })
          break
        case 'tranDo':     
          this.tranDoPerson(parentObj,item)
          break  
        case 'sendNotice':   
          this.showHasSendNotice = true
          this.selectId = item.id
          this.hasSendNotice = item.hasSendNotice
          break  
        case 'remind':   
          Modal.confirm({
            title: '是否发送一键提醒未完成的处理人?',
            onOk() {
              _this.oneClickRemind(item)
            },
          })
          break 
        case 'applyData':   
          window.open(`http://10.254.2.37:8383/portal/portalpage/index.jsp?yamitoken=\$YAMITOKEN\$`, "_blank");
          break  
        case 'openProcessDetail':   
          this.visibleModelProcess = true
          this.processId = parentObj.projectBuildId ? item.id + 'p' : item.id+''
          break         
        default:
          break
      }
    },
    confirmDel(parentObj,item) {
      const _this = this
      const deleteUrl = parentObj.taskBuildType != '3' ? '/projectWorkTask/deleteDetail' : '/projectWorkTask/deleteProjectDetail'
      postAction(deleteUrl, {
        id: item.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(`删除成功`)
          setTimeout(function () {
            _this.getTaskListData()
          }, 1000)
        } else {
          this.$message.warning('删除子任务失败:' + res.message)
        }
      })
    },
    tranDoOk() {
      this.showTranDo = false
      const _this = this
      postAction('/projectWorkTask/tranDo', {
        id: this.tranDo.id,
        taskBuildType:this.tranDo.taskBuildType,
        handleUserId:this.tranDo.handleUserId,
        handleUserName:this.tranDo.handleUserName
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(`转办成功`)
          setTimeout(function () {
            _this.getTaskListData()
          }, 1000)
        } else {
          this.$message.warning('转办失败:' + res.message)
        }
      })
    },
    tranDoCancel() {
      this.tranDo = {}
      this.showTranDo = false
    },
    tranDoPerson(parentObj,item) {
      this.showTranDo = true
      this.$set(this.tranDo, 'id', item.id)
      this.$set(this.tranDo, 'taskBuildType', parentObj.taskBuildType)
    },
    fetchTestUser(val) {
      if (val) {
        this.userTestData = []
        this.fetching = true
        getAction(this.url.getUserList, { name: val }).then((res) => {
          if (res.success) {
            this.userTestData = res.result
            this.fetching = false
          }
        })
      }
    },
    fetchTestChange(value, option) {
      this.$set(this.tranDo, 'handleUserId', value)
      this.$set(this.tranDo, 'handleUserName', option.componentOptions.children[0].text.trim())
    },
    confirmHeadDel(item) {
      const _this = this
      postAction('/projectWorkTask/headDetail', {
        id: item.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(`删除成功`)
          setTimeout(function () {
            _this.getTaskListData()
          }, 1000)
        } else {
          this.$message.warning('删除任务单失败:' + res.message)
        }
      })
    },
    confirmSendNotice() {
      const _this = this
      if (!this.selectId) {
        this.$message.warning('参数为空')
        return 
      }
      postAction('/projectWorkTask/updateHasSendNotice', {
        id: this.selectId,
        hasSendNotice: this.hasSendNotice
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success(`上线状态更新成功`)
          setTimeout(function () {
            _this.getTaskListData()
          }, 1000)
        } else {
          this.$message.warning('上线状态更新失败:' + res.message)
        }
      })
    },
    oneClickRemind(item) {
      postAction('/projectWorkTask/oneClickRemind', {
        id: item.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success('一键提醒发送成功')
        } else {
          this.$message.warning('一键提醒发送失败:' + res.message)
        }
      })
    },
    /**
     * 切换类别
     * projectStatus
     * projectSubStatus
     */
    handleToggle(code, codeRef) {
      this[codeRef] = code
      this.getTaskListData()
    },
    itemChange(item, child, val){
      this[item.model] = child.code
      this.getTaskListData()
    },
    setFoldDataList(type, list, name){
      const pro = {
        children: list,
        activedKey: this[type] || list[0].code,
        model: type,
        name,
        type: 'text'
      }
      this.foldData.push(pro)
    },
    /**
     * 排序 
     */
    handleSort(item, index){
      this.projectColumn = item.id;
      this.projectOrder = item.order === 'asc' ? 'desc' : 'asc'
      item.order = item.order === 'asc' ? 'desc' : 'asc'
      this.projectOrder = item.order
      this.$set(this.sortList, index, item)
      this.getTaskListData()
    },
    getBugLevel(bugLevel){
      if (!bugLevel) return ''
      let mes = ''
      let col = ''
      switch (bugLevel){
          case '1':
            mes = '致命'
            col = 'col-red'
            break;
          case '2': 
            mes = '严重'
            col = 'col-mid'
            break;
          case '3': 
            mes = '一般'
            col = 'col-small'            
            break;
          case '4': 
            mes = '提示/建议'
            col = 'col-green'            
            break;
          default:
      }
      return {
        name: mes,
        color: col
      }
    },
    /**
     *  x.x.x  从左往右
     *  .0.0  || .00.00 是大版本  
     *  .xx.0 || .xx.00 是中版本   
     *  其余小版本 
     */
    getVersion(val,bugLevel){      
      const reg = /[vV]\d{1,2}\.\d{1,2}\.\d{1,2}$/
      if (!reg.test(val)) return ''
      const sval = val.split('.')
      let mes = ''
      let col = ''
      if(['0','00'].includes(sval[2])){
        mes = '中版本'
        col = 'col-mid'
        if(['0','00'].includes(sval[1])){
          mes = '大版本'
          col = 'col-big'
        }
      }      
      return {
        name: mes,
        color: col
      }
    },
    drShowFunc(item) {
      if (!item) {
        return true
      }

      if (['11','hrManage'].includes(item.taskType)) {
        if ((item.openRange && item.openRange.indexOf(this.currentUserId) >= 0) || item.permissionFlag 
          || (item.dataPermissionFlag && this.userinfo.info.deptId !=item.mainDeptId)) {
            // 延误判断
            if (this.projectSubStatus != 4) {
              return true
            } 
            if (item.delayFlag) {
                return true
            } else {
              return false
            }
        } else {
          return false
        }
      }

      // 延误判断
      if (this.projectSubStatus != 4) {
          return true
      } 
      if (item.delayFlag) {
          return true
      } else {
        return false
      }
    },
    goPolicyLink(fileId){
      let urlJump = this.$router.resolve({ path: '/library/file/view/2/' + fileId + '/0' })
      window.open(urlJump.href, '_blank')
    }
  },
  filters: {
    quyStatus(val, that) {
      return that.projectSubType.find((item) => {
        return item.code == val
      }).name
    },
  },
}
</script>
<style lang="less" scoped>
@import 'task.less';
@import '~@assets/less/hte-main.less';
.box-version{color: #fff;border-radius: 5px;font-size:12px;background-color: #f9700e;padding: 2px 5px 1px;margin-right:4px;
    position: relative;top: -2px;
  &.col-mid {background-color: #fcb202} &.col-small{background-color: #97afd0} &.col-red{background-color: red} &.col-green{background-color: green}
}
.task-main .container {
  .cascade{margin: 18px 0 0 0}
  .project-info{display: flex; justify-content: space-between;align-items: center;top:5px;
    >div{display: flex; justify-content: space-between;align-items: center;}
  }
}
.status-box{
  width: 100px;
  height: 18px;
  line-height: 18px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  transform: rotate(45deg);
  top: 11px;
  right: -33px;
  z-index: 1;
  overflow: hidden;
  position: absolute;
}
.status-box-trando{
  width: 80px;
  height: 17px;
  line-height: 18px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  transform: rotate(45deg) scale(0.85);
  top: 5px;
  right: -27px;
  z-index: 1;
  overflow: hidden;
  position: absolute;
}
.task-main .container .box-list .box-list-content .content-bg{
  padding: 5px 10px 5px 0;
  span a{margin-right: 10%}
}
.task-main .container .box-list .box-list-content div.nav-bg{padding: 11px 10px 11px 0}
.projectStatusColor1 {
  background-color: #9DB7F0;
}
.projectStatusColor2 {
  background-color: #73AE81;
}
.projectStatusColor3 {
  background-color: #F0A0A0;
}
.projectStatusColor5 {
  background-color: #5bc4d4;
}
.tree-main {
  display: flex;
  justify-content: flex-start;
  &.shrinkage{
    // width: 80px;
    .box-left{width: 50px;
      .tree-title{flex-flow: column;padding-bottom: 0;
        .bold {
          max-width: 0;
          max-width: 0;
          opacity: 0;
          width: 0;
          height: 0;
          min-width: 0;
        }
        >i{position: relative;top: -4px;transform: rotate(180deg);color: #fff;}
        //        >i{position: relative;top: 29px;transform: rotate(180deg);color: #4183d9;}

      }
    }
    .content-list{
      width: calc(100% - 50px);
    }
    .content-list-no-menu{
      width:100%
    }
  }
  .box-left {
    color: #fff;
    background-color: #4f81c4;
    border: solid 1px #e6e6e6;
    border-radius: 2px;
    -webkit-transition: width .2s;transition: width .2s;
    .tree{overflow: auto;min-height: 250px;padding: 0 6px;}
    .tree-title{padding: 14px 10px;border-bottom: solid 1px #3168b1;display: flex;justify-content: space-between;align-items: center;
        >i{cursor: pointer;-webkit-transition: all .6s;transition: all .6s;
          &:hover{color: #dbdbdb;}
        }
        .bold{color: #fff}
    }
    font-size: 16px;
    margin: 10px 10px 31px 0;
    ul{
      display:block;
    }
    /deep/ .ant-tree-switcher {
      background: unset !important;
    }
    /deep/ .ant-tree li{padding: 4px;
      .ant-tree-node-content-wrapper, .anticon{color: #f5f9ff;}
      .ant-tree-node-content-wrapper.ant-tree-node-selected{background-color: #3168b1;}
      .ant-tree-node-content-wrapper:hover{background-color: #3a71bb;}
    }
    /deep/ .ant-tree.ant-tree-show-line li:not(:last-child)::before{left: 15px;}
  }
  .content-list {
    flex: 1
  }

  .content-list-no-menu{
    width:100%;
  }  
}




</style>